<!-- 地图模块 -->
 <!-- sections/MapSection.vue -->
<template>
    <section class="container mx-auto px-4 py-8">
      <!-- 地图控制栏 -->
      <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-blue-800">智慧导览地图</h2>
        <div class="flex space-x-2">
          <button
            @click="switchView('2d')"
            :class="[activeView === '2d' ? 'tab-active' : 'bg-gray-300']"
            class="px-4 py-2 text-white rounded-l-full transition-all"
          >
            2D视图
          </button>
          <button
            @click="switchView('3d')"
            :class="[activeView === '3d' ? 'tab-active' : 'bg-gray-300']"
            class="px-4 py-2 text-white rounded-r-full transition-all"
          >
            3D视图
          </button>
        </div>
      </div>
  
      <!-- 地图容器 -->
      <div class="bg-white rounded-xl shadow-md p-4 mb-6">
        <Map2D 
          v-if="activeView === '2d'"
          :center="mapCenter"
          :zoom="zoomLevel"
          :layers="mapLayers"
          :points="POINTS"
          @ready="handleMapReady"
          @moveend="handleMapMove"
        />
        <Map3D v-if="activeView === '3d'" />
      </div>
  
      <!-- 地图功能区块 -->
      <div v-if="activeView === '2d'" class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="space-y-4">
          <SearchFilter @search="handleSearch" class="bg-white rounded-xl shadow-md p-6" />
          
          <!-- 搜索结果列表 -->
          <div v-if="searchResults.length > 0" class="bg-white rounded-xl shadow-md p-4">
            <h3 class="text-lg font-semibold mb-3">搜索结果</h3>
            <div class="space-y-2">
              <div 
                v-for="point in searchResults" 
                :key="point.name"
                class="flex items-center p-2 hover:bg-gray-50 rounded-lg cursor-pointer"
                @click="showSpotDetail(point)"
              >
                <img 
                  :src="point.img" 
                  :alt="point.name"
                  class="w-16 h-16 object-cover rounded-lg mr-3"
                />
                <div>
                  <h4 class="font-medium">{{ point.name }}</h4>
                  <p class="text-sm text-gray-500">点击查看详情</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">热门分类</h3>
          <div class="grid grid-cols-2 gap-3">
            <CategoryButton
              v-for="category in categories"
              :key="category"
              :category="category"
              @click="filterByCategory(category)"
            />
          </div>
        </div>
  
        <div class="bg-white rounded-xl shadow-md p-6">
          <h3 class="text-xl font-semibold mb-4">快捷操作</h3>
          <button
            class="w-full bg-blue-600 text-white py-3 rounded-lg mb-3 hover:bg-blue-700"
            @click="handleNavigate"
          >
            <font-awesome-icon icon="directions" class="mr-2" />
            路线导航
          </button>
          <button class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700" @click="handleFavorite">
            <font-awesome-icon icon="heart" class="mr-2" />
            收藏位置
          </button>
        </div>
      </div>
    </section>
  
    <TripPlannerDialog 
      v-model="showTripPlannerDialog"
      :destination="currentSpot?.name"
      :position="currentSpot?.position"
    />
    <MapSpotDialog
      v-model="showDetailDialog"
      :spot="currentSpot"
      @navigate="handleNavigate"
      @favorite="handleFavorite"
    />
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, computed } from 'vue'
  import Map2D from './Map2D.vue'
  import Map3D from './Map3D.vue'
  import SearchFilter from '../ui/SearchFilter.vue'
  import CategoryButton from '../ui/CategoryButton.vue'
  import TripPlannerDialog from './TripPlannerDialog.vue'
  import MapSpotDialog from './MapSpotDialog.vue'
  import { ElMessage } from 'element-plus'

  //景点图片
  import FamenImage from '../../assets/images/attractions/famen-temple.jpg'
import TaibaiImage from '../../assets/images/attractions/taibai-mountain.jpg'
import BronzeImage from '../../assets/images/attractions/bronze-museum.jpg'

  
  const activeView = ref<'2d' | '3d'>('2d')
  const categories = ['文化古迹', '自然风光', '美食餐饮', '摄影打卡']
  const mapCenter = ref<[number, number]>([34.4336, 107.902222])
  const zoomLevel = ref(11)
  const mapLayers = ref([])
  let mapInstance: any = null
  const showDetailDialog = ref(false)
  const currentSpot = ref<any>(null)
  const searchResults = ref<any[]>([])
  const showTripPlannerDialog = ref(false)
  
  const POINTS = [
    {
      name: '法门寺',
      img: FamenImage,
      position: [34.442222, 107.902778]
    },
    {
      name: '太白山国家森林公园',
      img: TaibaiImage,
      position: [34.059167, 107.747222]
    },
    {
      name: '宝鸡市青铜器博物馆',
      img: BronzeImage,
      position: [34.368056, 107.2375]
    },
    {
      name: '关山草原',
      img: '/images/guanshan.jpg',
      position: [34.573889, 106.8575]
    }
  ]
  
  const switchView = (viewType: '2d' | '3d') => {
    activeView.value = viewType
  }
  
  const handleSearch = (query: string) => {
    if (mapInstance && query.trim()) {
      // 查找匹配的景点
      searchResults.value = POINTS.filter(point => 
        point.name.toLowerCase().includes(query.toLowerCase())
      )
      
      if (searchResults.value.length > 0) {
        // 更新地图中心点和缩放级别到第一个结果
        const firstResult = searchResults.value[0]
        mapCenter.value = firstResult.position
        zoomLevel.value = 14
        
        // 强制地图更新视图
        mapInstance.setView(firstResult.position, 14)
        
        ElMessage({
          message: `找到 ${searchResults.value.length} 个相关景点`,
          type: 'success'
        })
      } else {
        searchResults.value = []
        ElMessage({
          message: '未找到匹配的景点',
          type: 'warning'
        })
      }
    } else {
      searchResults.value = []
    }
  }
  
  const filterByCategory = (category: string) => {
    if (mapInstance) {
      // 实现分类过滤逻辑
      console.log('筛选分类:', category)
    }
  }
  
  const handleMapReady = (map: any) => {
    mapInstance = map
    console.log('地图已就绪')
  }
  
  const handleMapMove = (center: [number, number]) => {
    mapCenter.value = center
  }
  
  const showSpotDetail = (spot: any) => {
    // 先更新地图位置
    if (mapInstance) {
      mapInstance.setView(spot.position, 14)
    }
    
    // 更新地图中心点状态
    mapCenter.value = spot.position
    zoomLevel.value = 14
    
    // 设置当前景点并显示详情
    currentSpot.value = spot
    showDetailDialog.value = true
  }
  
  const handleNavigate = () => {
    showTripPlannerDialog.value = true
  }
  
  const handleFavorite = () => {
    ElMessage({
      message: '收藏成功',
      type: 'success'
    })
  }
  
  // 初始化地图数据
  onMounted(() => {
    // 这里可以加载初始的图层数据
    // mapLayers.value = [...]
  })
  </script>
  
  <style scoped>
  .tab-active {
    @apply bg-blue-600;
  }

  /* 确保地图容器的z-index较低 */
  :deep(.leaflet-container) {
    z-index: 1;
  }

  /* 确保地图控件不会超出容器 */
  :deep(.leaflet-control-container) {
    z-index: 2;
  }

  /* 添加过渡动画样式 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.3s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  </style>